<!-- 新登陆页面 -->
<template>
  <div class="content">
    <div class="left">
    </div>
    <div class="right">
      <!--  -->
      <div class="top">
        <div class="sign">
          <span>没有账号?</span>
          <span class="link" @click = "register(0)">立即注册</span>
        </div>
      </div>
      <!--  -->
      <div class="panel">
        <div class="box" v-if="loginOrregister == 1" >
          <div class="title">
            登陆到智联同城管理后台
          </div>
          <div class="boxCont">
            <div class="tabtitle">
              <p @click=isSshow(0) :class = "shows == 0?'current':''">密码登陆</p>
              <p @click=isSshow(1) :class = "shows == 1?'current':''">验证码登陆</p>
              <p @click=isSshow(2) :class = "shows == 2?'current':''">二维码登陆</p>
            </div>
            <div class="tabcontent" >
              <!-- 密码登录 -->
              <div class="tabcontentBox1" v-if="shows == 0">
                <div class="account bottom10">
                  <p>账号</p>
                  <input type="text" v-model = "form0.mobile">
                </div>
                <div class="password bottom25">
                  <p style="display:flex;justify-content:space-between">
                    <span>密码</span>
                    <span class="link">忘记密码？</span>
                  </p>
                  <input type="password" v-model = "form0.password">
                </div>
              </div>
              <div class="tabcontentBox1" v-if="shows == 1">
                <div class="account bottom10">
                  <p>手机号</p>
                  <input type="text" v-model = "form1.mobile">
                </div>
                <div class="password bottom10">
                  <p style="display:flex;justify-content:space-between">
                    <span>密码</span>
                    <span class="link">忘记密码？</span>
                  </p>
                  <input type="text" v-model = "form1.password">
                </div>
                <div class="password bottom25">
                  <p style="display:flex;justify-content:space-between">
                    <span>验证码</span>
                  </p>
                  <div style="display:flex;justify-content:space-between">
                    <input type="text" style="width:280px;" v-model = "form1.code">
                    <el-button type="primary" @click= getcode(3)>获取验证码</el-button>
                  </div>
                </div>
              </div>
              <el-button type="primary" style="width:180px" @click = "handleLogin">登陆</el-button>
              <!--  -->
              <div class="cutOff">
                <div class="line"></div>
                <div class="Or">Or</div>
                <div class="line"></div>
              </div>
              <div class="other">
                <div class="qq">
                  <img src="@/static/style/qq.png" alt="">
                  <p>使用QQ登陆</p>
                </div>
                <div class="wx">
                  <img src="@/static/style/weixin.png" alt="">
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 注册 -->
        <div class="box" v-if="loginOrregister == 0">
          <div class="title">
            注册智联同城管理后台
          </div>
          <div class="boxCont">
            <div class="tabcontent" >
              <div class="tabcontentBox1">
                <div class="account bottom10">
                  <p>手机号</p>
                  <input type="text" v-model = "registers.mobile">
                </div>
                <div class="password bottom10">
                  <p>
                    密码
                  </p>
                  <input type="text" v-model = "registers.password">
                </div>
                <div class="password bottom10">
                  <p style="display:flex;justify-content:space-between">
                    <span>验证码</span>
                  </p>
                  <div style="display:flex;justify-content:space-between">
                    <input type="text" style="width:280px;" v-model = "registers.code">
                    <el-button type="primary" @click= "getcode(4)">获取验证码</el-button>
                  </div>
                </div>
              </div>
              <div>
                <el-checkbox v-model="agreed">同意</el-checkbox>
                <span class="link">智联同城用户注册协议》</span>
              </div>
              <el-button type="primary" @click="postRegister" style="width:180px;height:40px;margin:10px 0;">免费注册</el-button>
              <div>
                <span>已有账号？</span>
                <span class="link" @click = "register(1)">直接登陆</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="top"></div>
    </div>
  </div>
</template>

<script>
import { register, getCode } from '@/api/user';
export default {
  data() {
    return {
      loginOrregister: 1,
      shows: 0,
      activeName: "activeName",
      form0: {
        mobile: "",
        password: "",
        phone: "",
        code: ""
      },
      form1: {
        mobile: "",
        password: "",
        phone: "",
        code: ""
      },
      agreed: false,
      registers: {
        mobile: "",
        password: "",
        code: ""
      }
    };
  },

  components: {},
  methods: {
    handleLogin() {
      this.loading = true;
      this.$store
        .dispatch("user/userLogin", this.form0)
        .then(() => {
          this.$router.push({ path: "/manage" });
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
        });
    },
    isSshow(index) {
      var self = this;
      switch (index) {
        case 0:
          self.shows = 0;
          break;
        case 1:
          self.shows = 1;
          break;
        case 2:
          self.shows = 2;
          break;
      }
    },
    getcode(index) {
      switch (index) {
        case 4:
          getCode({
            mobile: this.registers.mobile
          }).then(res => {
            console.log(res)
          }).catch(err => {
            console.log(err)
          });
          break;
      }
    },
    register(index) {
      this.loginOrregister = index;
    },
    postRegister() {
      var self = this;
      if (self.agreed) {
        const { mobile, password, code } = this.registers;
        register(mobile, password, code).then(res => {
          this.$message.success(res.msg);
          setTimeout(function() {
            this.$router.push({
              path: '/login'
            })
          }, 800)
        })
      } else {
        self.$message({
          message: "您没有勾选用户协议！",
          type: "warning"
        });
      }
    }
  }
}
</script>
<style lang= "scss" scoped>
.link{
  font-size:14px;
  color: #409EFF;
  cursor: pointer;
}
.bottom10{
  margin-bottom:20px;
}
.bottom25{
  margin-bottom:25px;
}
.content{
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  .left{
    min-width: 632px;
    background: url("../../static/style/left.png");
    background-size: 100%;
    background-repeat: no-repeat;
  }
  .right{
    flex:1;
    padding-right:85px;
    .top{
      height:100px;
      line-height: 100px;
      font-size:12px;
      .sign{
        min-width: 100px;
        padding:0 20px;
        float:right;
      }
    }
    .panel{
      width:100%;
      height:calc(100% - 200px);
      display:flex;
      justify-content: center;
      align-items: center;
      .box{
        width:420px;
        min-height: 530px;
        .title{
          font-size:24px;
          font-weight:800px;
          margin-bottom:20px;
        }
        .boxCont {
          .tabtitle {
            display: flex;
            color: #999999;
            font-size:16px;
            p{
              margin-right:20px;
              padding:4px 0;
            }
            .current{
              color: #444444 !important;
              border-bottom:2px solid #409EFF;
            }
          }
          .tabcontent{
            input{
              width:100%;
              height:40px;
              border-radius: 5px;
              border:0;
              background:#F5F6F7;
              box-shadow:0px 2px 4px 0px rgba(0,0,0,0.06);
              outline: none;
            }
            .cutOff{
              width:100%;
              height:82px;
              display:flex;
              justify-content: center;
              align-items: center;
              .Or{
                flex:1;
                text-align: center;
                /* width:60px; */
                color: #757576;
              }
              .line{
                width:45%;
                height:1px;
                border:1px solid #F5F6F7;
              }
            }
            .other {
              display: flex;
              .qq {
                width: 288px;
                height: 48px;
                background: #409EFF;
                color:#fff;
                display:flex;
                justify-content: center;
                align-items: center;
                border-radius: 5px;
                img{
                  width:18px;
                  height:20px;
                }
                p{
                  padding:0 10px;
                }
              }
              .wx{
                width:48px;
                height:48px;
                display: flex;
                justify-content: center;
                align-items: center;
                background: #F2F2F2;
                border-radius: 5px;
                margin-left:10px;
                img{
                  width:50%;
                  height:50%;
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
